/**
滚动条默认配置
.my_scroll 为自定义滚动
*/


/* chrome & safari 浏览器 */
/*滚动条整体部分,必须要设置*/

::-webkit-scrollbar {
  /*设置纵向滚动条宽度为0表示不加滚动条*/
  width: 14px;
  /*设置横向滚动条宽度*/
  height: 12px;
  //background-color: transparent;
  background-color: #f2f2f2;
  transition: scaleX(0.8);
  -webkit-transition: scaleX(0.8);
  -moz-transition: scaleX(0.8);
  -ms-transition: scaleX(0.8);
  -o-transition: scaleX(0.8);
}

/*滚动条的轨道*/
::-webkit-scrollbar-track {
  background-color: transparent;
  // background-color: #f2f2f2;
}

/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  // border-radius: 30px;
  // -webkit-border-radius: 30px;
  // -moz-border-radius: 30px;
  // -ms-border-radius: 30px;
  // -o-border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
  // background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 25%,
  //     transparent 25%,
  //     transparent 50%,
  //     rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%,
  //     transparent 75%,
  //     transparent);
  // box-shadow: inset 0 0 3px #fff;
  opacity: .1;
}

/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {
  height: 0;
  background-color: transparent;
}

/*自定义滚动条*/
.my_scroll {
  &::-webkit-scrollbar {
    /* 设置纵向滚动条宽度 为 0 表示不加滚动条 */
    width: 5px;
    /* 设置横向滚动条宽度 */
    height: 3px;
    background-color: transparent;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
  }
}
// 自定义滚动 高度减小
.my_scroll_h_mini { 
  &::-webkit-scrollbar {
    /* 设置纵向滚动条宽度 为 0 表示不加滚动条 */
    width: 5px;
    /* 设置横向滚动条宽度 */
    height: 8px;
    background-color: #f2f2f2;
  }
}

/* 设置不包含滚动条 */
.no_scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*滚动条样式 end*/